<template><div><h2 id="为什么追求统一的编码风格" tabindex="-1"><a class="header-anchor" href="#为什么追求统一的编码风格" aria-hidden="true">#</a> 为什么追求统一的编码风格？</h2>
<ul>
<li>
<p>现在项目大都采用多人协同开发，人多，则每个人的编码风格存在不同。A习惯2单位缩进，B习惯4单位缩进</p>
</li>
<li>
<p>编辑器行为的不同。比如：有些人喜欢vscode、有些人中意webstorm...</p>
</li>
<li>
<p>提交代码后，代码在不同的系统中包括换行、回车符的表现行为不一致导致代码格式凌乱等。</p>
</li>
</ul>
<h2 id="editorconfig-、-prettier-、-eslint-到底是什么" tabindex="-1"><a class="header-anchor" href="#editorconfig-、-prettier-、-eslint-到底是什么" aria-hidden="true">#</a> Editorconfig 、 Prettier 、 ESlint 到底是什么？</h2>
<h3 id="editorconfig" tabindex="-1"><a class="header-anchor" href="#editorconfig" aria-hidden="true">#</a> Editorconfig</h3>
<ul>
<li>
<p><a href="https://Editorconfig.org/" target="_blank" rel="noopener noreferrer">官网地址<ExternalLinkIcon/></a></p>
</li>
<li>
<p>editorconfig主要是解决不同编辑器之间的编码风格，它就如同一个配置项，编辑器会读取这个配置项用于自己的编码风格设置，从而抹平不同编辑器之间编码风格。</p>
</li>
<li>
<p>Editorconfig 相比较 ESlint 以及 Prettier 而言更像是一些基础的代码风格约定，比如：通过editorconfig约定缩进风格为tab、缩进规范为2个空格，那么，只是决定了编辑器的tab缩进行为。</p>
</li>
</ul>
<div class="hint-container warning">
<p class="hint-container-title">注意事项</p>
<ul>
<li>1.一定要配置规则适用的范围，不然不会生效。</li>
</ul>
<div class="language-text line-numbers-mode" data-ext="text"><pre v-pre class="language-text"><code>[*]

end_of_line = lf

[*.{js, py}]

charset = utf-8
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div><ul>
<li>2.查看自己适用的编辑器是否需要下载插件进行支持，否则不生效。例如vscode需要配合editorconfig for vscode插件一起使用，</li>
<li>3.目前vscode只支持以下配置</li>
</ul>
<div class="language-text line-numbers-mode" data-ext="text"><pre v-pre class="language-text"><code>root&lt;booleam>：是否顶级配置文件
charset&lt;"latin" | "utf-8" | "utf-8-bom" | "utf-16be" | "utf-16le">：文件编码格式
indent_style&lt;"tab" | "space">: 缩进方式
indent_size&lt;number>: 缩进大小
end_of_line&lt;"LF"|"CRLF"|"CR">：换行符类型
insert_final_newline&lt;boolean>：是否让文件以空行结束
trim_trailing_whitespace&lt;boolean>：是否删除行尾空格
</code></pre><div class="line-numbers" aria-hidden="true"><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div><div class="line-number"></div></div></div></div>
<h3 id="prettier" tabindex="-1"><a class="header-anchor" href="#prettier" aria-hidden="true">#</a> Prettier</h3>
<ul>
<li>
<p><a href="https://prettier.io/" target="_blank" rel="noopener noreferrer">官网地址<ExternalLinkIcon/></a></p>
</li>
<li>
<p>Prettier主要做代码的格式化处理。纯配置性，唯一需要注意的是和editorconfig并用或者其他情况引发的一些不生效的问题。</p>
</li>
<li>
<p>需要搭配vscode的插件Prettier，这个插件的作用相当于一个启动项，用于检测</p>
</li>
</ul>
<div class="hint-container warning">
<p class="hint-container-title">不生效的一部分原因</p>
<ul>
<li>
<ol>
<li>在代码格式上有别的格式化配置如 editorconfig 导致vscode不知道应该以谁为默认格式化配置。排查方法鼠标右键格式化，看看是不是显示了不确定应该使用那种配置作为代码的格式化。</li>
</ol>
</li>
<li>
<ol start="2">
<li>与editorconfig公用，会将editorconfig的配置同步到Prettier中做一次覆盖，详情见<a href="https://prettier.io/docs/en/api.html#prettierresolveconfigfileurlorpath--options" target="_blank" rel="noopener noreferrer">prettier.resolveConfig<ExternalLinkIcon/></a></li>
</ol>
</li>
<li>
<ol start="3">
<li>格式化的时机需要自己去设置里自行添加，如保存的时候格式化。</li>
</ol>
</li>
<li>
<ol start="4">
<li>.prettierignore配置文件可以忽略一些不需要格式化的文件或者文件夹。但是，Prettier有默认做一些文件夹的忽略。如：.git/node_modules... 详情见官网</li>
</ol>
</li>
</ul>
</div>
<h3 id="eslint" tabindex="-1"><a class="header-anchor" href="#eslint" aria-hidden="true">#</a> ESlint</h3>
<h2 id="editorconfig-、-prettier-、-eslint-是否存在功能的重复" tabindex="-1"><a class="header-anchor" href="#editorconfig-、-prettier-、-eslint-是否存在功能的重复" aria-hidden="true">#</a> editorconfig 、 Prettier 、 ESlint 是否存在功能的重复？</h2>
<ul>
<li>
<p>先说结论，他们之间确实存在了一部分功能的重复。但是，确实也可以在项目中共存发挥各自的优势点。</p>
</li>
<li>
<p>原因如下：</p>
</li>
<li>
<ol>
<li>editorconfig只是一份给编辑器读取的配置性文件，保证编辑器行为的统一，跟开发者本身使用java/js/python没有任何的关系。而Prettier是JS独有的格式化工具，里面很多配置项是 JS 这门语言特有的规范。两者并非是“非此即彼”的单选。</li>
</ol>
</li>
<li>
<p>2.ESlint 的目的在于使代码风格更加一致并避免错误，代码的风格统一，看起来ESlint和Prettier似乎也存在冲突的功能点。事实上也确实如此，之所以依然采用ESlint + Prettier的形式作为工程代码格式化+检测的原因是：就代码风格上来说统一来说，Perttier更优秀，仅此而已。事实上为了解决二者的冲突，Prettier给出了两个插件【eslint-config-prettier】和【eslint-plugin-prettier】</p>
</li>
<li>
<p>因此我们得到以下总结：</p>
</li>
<li>
<p>1.EditorConfig 将负责统一各种编辑器的配置，所有和编辑器相关的配置 (行尾、缩进样式、缩进距离...) 都交给它</p>
</li>
<li>
<p>2.Prettier 作为 代码格式化 工具</p>
</li>
<li>
<p>3.其余的，也就是 代码质量 方面的语法检查，用 ESLint 来做</p>
</li>
<li>
<p>4.<a href="https://cloud.tencent.com/developer/article/1840432" target="_blank" rel="noopener noreferrer">一个处理三者冲突的过程展示<ExternalLinkIcon/></a></p>
</li>
</ul>
</div></template>


